<template>
  <view class="page">
    <!-- 头部 -->
    <!-- <view class="header">
      <text class="title">反馈管理</text>
    </view> -->

    <!-- 筛选区域 -->
    <view class="filters">
      <scroll-view class="status-tabs" scroll-x>
        <view
          v-for="(tab, idx) in statusOptions"
          :key="idx"
          class="tab-item"
          :class="{ active: selectedStatus === tab.value }"
          @click="onStatusChange(tab.value)"
        >
          {{ tab.name }}
        </view>
      </scroll-view>
<!-- 
      <view class="type-picker">
        <picker :range="typeOptions" range-key="name" :value="typeIndex" @change="onTypeChange">
          <view class="picker-inner">
            <text>类型：</text>
            <text class="picker-value">{{ typeOptions[typeIndex].name }}</text>
          </view>
        </picker>
      </view> -->
    </view>

    <!-- 列表 -->
    <view class="list">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="card"
        @click="goDetail(item)"
      >
        <view class="card-header">
          <view class="badges">
            <text class="badge type" :class="'type-' + item.type">{{ typeName(item.type) }}</text>
            <text class="badge status" :class="'status-' + item.status">{{ statusName(item.status) }}</text>
          </view>
          <text class="time">{{ item.createTime }}</text>
        </view>
        <view class="content">{{ snippet(item.content) }}</view>
        <view class="footer">
          <text class="no">编号：{{ item.feedbackNo }}</text>
          <text class="reply">回复：{{ item.replyCount }}</text>
        </view>
        <view class="actions" @click.stop>
          <button class="btn btn-default" @click="markStatus(item,0)">待处理</button>
          <button class="btn btn-success" @click="markStatus(item,2)">已处理</button>
          <button class="btn btn-danger" @click="markStatus(item,3)">关闭</button>
        </view>
      </view>

      <view v-if="list.length === 0 && !loading" class="empty">
        <text class="icon">📝</text>
        <text class="text">暂无反馈</text>
      </view>

      <view class="loadmore" v-if="list.length > 0">
        <text v-if="loading">加载中...</text>
        <text v-else-if="!hasMore">没有更多了</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getAdminFeedbackList, updateFeedbackStatus } from '@/api/feedback'

export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      statusOptions: [
        { name: '全部', value: null },
        { name: '待处理', value: 0 },
        { name: '已处理', value: 2 },
        { name: '已关闭', value: 3 }
      ],
      selectedStatus: null,
      typeOptions: [
        { name: '全部', value: null },
        { name: '商品问题', value: 1 },
        { name: '配送问题', value: 2 },
        { name: '服务问题', value: 3 },
        { name: '系统问题', value: 4 },
        { name: '功能建议', value: 5 },
        { name: '其他', value: 6 }
      ],
      typeIndex: 0
    }
  },
  onLoad() {
    this.resetAndLoad()
  },
  onPullDownRefresh() {
    this.resetAndLoad(() => uni.stopPullDownRefresh())
  },
  onReachBottom() {
    if (!this.loading && this.hasMore) {
      this.pageNum++
      this.loadList()
    }
  },
  methods: {
    resetAndLoad(done) {
      this.pageNum = 1
      this.list = []
      this.hasMore = true
      this.loadList(done)
    },
    async loadList(done) {
      if (this.loading) return
      this.loading = true
      try {
        const params = { pageNum: this.pageNum, pageSize: this.pageSize }
        const status = this.selectedStatus
        const type = this.typeOptions[this.typeIndex].value
        if (status !== null && status !== undefined) params.status = status
        if (type !== null && type !== undefined) params.type = type

        const pageData = await getAdminFeedbackList(params)
        const rawRecords = Array.isArray(pageData.records) ? pageData.records : []
        const total = parseInt(pageData.total) || 0
        const records = rawRecords.map(r => ({ ...r }))

        if (this.pageNum === 1) this.list = records
        else this.list = this.list.concat(records)

        this.hasMore = this.list.length < total
      } catch (e) {
        console.error('加载反馈失败', e)
        uni.showToast({ title: '加载失败', icon: 'none' })
      } finally {
        this.loading = false
        done && done()
      }
    },
    onStatusChange(val) {
      this.selectedStatus = val
      this.resetAndLoad()
    },
    onTypeChange(e) {
      this.typeIndex = Number(e.detail.value) || 0
      this.resetAndLoad()
    },
    snippet(s) {
      if (!s) return ''
      const t = String(s)
      return t.length > 50 ? t.substring(0, 50) + '...' : t
    },
    typeName(t) {
      const map = {1:'商品问题',2:'配送问题',3:'服务问题',4:'系统问题',5:'功能建议',6:'其他'}
      return map[t] || '其他'
    },
    statusName(s) {
      const map = {0:'待处理',1:'待处理',2:'已处理',3:'已关闭'}
      return map[s] || '未知'
    },
    async markStatus(item, status) {
      try {
        await updateFeedbackStatus(item.id, status)
        item.status = status
        uni.showToast({ title: '已更新', icon: 'success' })
      } catch (e) {
        // 失败时已有拦截器提示
      }
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/pages/merchant/feedback-detail?id=${item.id}`,
        success: (res) => {
          // 通过 eventChannel 传递当前项，详情页直接使用，避免再次请求用户端详情接口
          res.eventChannel && res.eventChannel.emit && res.eventChannel.emit('feedbackData', item)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page { min-height: 100vh; background: #f5f7fa; }
.header { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; padding: 24rpx; text-align:center; }
.title { font-size: 32rpx; font-weight: bold; }
.filters { background: #fff; padding: 16rpx; display: flex; flex-direction: column; gap: 12rpx; }
.status-tabs { white-space: nowrap; }
.tab-item { display:inline-block; padding: 8rpx 20rpx; margin-right: 12rpx; background:#f0f0f0; border-radius: 20rpx; font-size: 26rpx; color:#666; }
.tab-item.active { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; }
.type-picker { padding: 8rpx 12rpx; background:#f9f9f9; border-radius:8rpx; }
.picker-inner { display:flex; align-items:center; gap: 8rpx; color:#333; }
.picker-value { color:#667eea; }
.list { padding: 16rpx; }
.card { background:#fff; border-radius: 12rpx; padding: 16rpx; margin-bottom: 12rpx; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06); }
.card-header { display:flex; justify-content: space-between; align-items:center; margin-bottom: 8rpx; }
.badges { display:flex; gap: 8rpx; }
.badge { padding: 2rpx 8rpx; border-radius: 6rpx; font-size: 22rpx; }
.badge.type { background:#eef; color:#345; }
.badge.status { background:#efe; color:#153; }
.badge.status.status-1 { background:#cfe2ff; color:#084298; }
.badge.status.status-2 { background:#d1e7dd; color:#0f5132; }
.badge.status.status-3 { background:#e2e3e5; color:#383d41; }
.time { font-size: 24rpx; color:#999; }
.content { font-size: 28rpx; color:#333; margin: 8rpx 0; }
.footer { display:flex; justify-content: space-between; font-size: 24rpx; color:#888; }
.actions { display:flex; gap: 12rpx; margin-top: 12rpx; }
.btn { padding: 12rpx 16rpx; border-radius: 8rpx; font-size: 24rpx; }
.btn-default { background:#f0f0f0; color:#333; }
.btn-success { background:#1abc9c; color:#fff; }
.btn-danger { background:#e74c3c; color:#fff; }
.empty { text-align:center; color:#999; padding: 100rpx 0; }
.icon { font-size: 64rpx; display:block; margin-bottom: 12rpx; }
.loadmore { text-align:center; color:#999; padding: 20rpx 0; }
</style>
